<template>
  <div class="md-example-child md-example-child-tabs md-example-child-tab-bar-4">
    <md-tab-bar
      v-model="current"
      :items="items"
      :has-ink="false"
    >
      <template slot="item" slot-scope="{ item }">
        <router-link :to="item.link">
        <div class="custom-item">
          <div class="icons">
            <img :src="item.icon" style="width: 25px;" />
          </div>
          <div class="text">
            <span v-text="item.label"></span>
          </div>
        </div></router-link>
      </template>
    </md-tab-bar>
  </div>
</template>

<script>
import {TabBar, Icon} from 'mand-mobile'
import IndexPng from '../../assets/images/index.png'
import PlatPng from '../../assets/images/platform.png'
import PhotoPng from '../../assets/images/photo.png'
import MatrixPng from '../../assets/images/matrix.png'
import SelfPng from '../../assets/images/self.png'

export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
    [Icon.name]: Icon,
  },
  data() {
    return {
      current: 1,
      items: [{name: 1, label: '首页', link: '/', icon: IndexPng}, 
      {name: 2, label: '用稿平台', link: '/Plat', icon: PlatPng}, 
      {name: 3, label: '随手拍拍', link: '/Photo', icon: PhotoPng}, 
      {name: 4, label: '旅游矩阵', link: '/Matrix', icon: MatrixPng}, 
      {name: 5, label: '个人中心', link: '/Self', icon: SelfPng},],
    }
  },
}

</script>

<style lang="stylus">
  .md-example-child-tab-bar-4
      width 100%
      position fixed
      z-index 999
      bottom 0px
      left 0px
  .md-tab-bar 
      padding 0 20px

  .md-tab-bar-item 
      min-height 70px
      padding 0 0
      margin 0 0
  .custom-item
    display flex
    flex-direction column
    align-items center
    justify-content center
    height 100%
    flex 1
    .text
      font-size 12px


</style>